<template>
    <div>
        <a-form ref="formRef" @finish="handleFinish" :model="form" name="basic" :label-col="{ span: 8 }">
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="付款类型" name="type"
                        :rules="[{ required: true }]" class="text-left">
                        <a-radio-group :disabled="disabled" v-model:value="form.type" name="radioGroup"
                            :options="paymentType">
                        </a-radio-group>
                    </a-form-item>
                </a-col>

            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="项目名称" name="proName" :rules="[{ required: true }]">
                        <a-input-search v-model:value="form.proName" style="width: 100%" placeholder="选择的项目"
                            @click="onProjectSearch" :disabled="disabled" @search="onProjectSearch" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="付款事由" name="cause" :rules="[{ required: true }]">
                        <a-input v-model:value="form.cause" :disabled="disabled" style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
            </a-row>
            <div>

                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="科目名称" name="name" :rules="[{ required: true }]">
                            <a-input v-model:value="form.name" :disabled="disabled" style="width: 100%"
                                placeholder="" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">

                        <a-form-item label="合同金额" name="amount" :rules="[{ required: true }]">
                            <a-input-number :precision="2" :min="0" v-model:value="form.amount" :disabled="disabled"
                                style="width: 100%" placeholder="" />
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="合同名称" name="contractName" :rules="[{ required: true }]">
                            <a-input-search @click="onContractSearch" :disabled="disabled"
                                v-model:value="form.contractName" style="width: 100%" placeholder="选择采购合同"
                                @search="onContractSearch" />
                        </a-form-item>
                    </a-col> <a-col :span="12">
                        <a-form-item label="付款金额" name="paymentAmount" :rules="[{ required: true }]">
                            <a-input-number :precision="2" :min="0" v-model:value="form.paymentAmount"
                                :disabled="disabled" style="width: 100%" placeholder="" />
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="供应商名称" name="supplierName">
                            <a-input v-model:value="form.supplierName" disabled style="width: 100%" />
                        </a-form-item>
                    </a-col>

                </a-row>
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="开户行" name="bank">
                            <a-input v-model:value="form.bank" disabled style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="账号" name="account">
                            <a-input v-model:value="form.account" disabled style="width: 100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="付款明细" name="detail">
                            <a-textarea v-model:value="form.detail" :disabled="disabled" :rows="4" placeholder=""
                                style="width: 100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>


            <!-- <div v-if="form.paymentType == '2'">

                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="服务合同名称" name="serviceContract">
                            <a-input-search v-model:value="form.serviceContract" style="width: 100%" placeholder="选择服务合同"
                                @search="onSearch" />
                        </a-form-item>
                    </a-col> <a-col :span="12">
                        <a-form-item label="付款金额" name="paymentAmount">
                            <a-input v-model:value="form.paymentAmount" :disabled="disabled" style="width: 100%"
                                placeholder="" />
                        </a-form-item>
                    </a-col>

                </a-row>
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="服务合同总金额" name="serviceContractTotalAmount">
                            <a-input v-model:value="form.serviceContract" style="width: 100%" placeholder="选择服务合同" />
                        </a-form-item>
                    </a-col> <a-col :span="12">
                        <a-form-item label="已付款金额" name="paidAmount">
                            <a-input v-model:value="form.paidAmount" :disabled="disabled" style="width: 100%"
                                placeholder="" />
                        </a-form-item>
                    </a-col>

                </a-row>
            </div>

            <div v-if="form.paymentType == '3'">


                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-item label="项目费用" name="serviceContractTotalAmount">
                            <a-select>
                                <a-select-option value="请选择…">请选择…</a-select-option>
                                <a-select-option value="差旅费">差旅费</a-select-option>
                                <a-select-option value="通讯费">通讯费</a-select-option>
                                <a-select-option value="交通费">交通费</a-select-option>
                                <a-select-option value="加班餐费、团建费用">加班餐费、团建费用</a-select-option>
                                <a-select-option value="办公费">办公费</a-select-option>
                                <a-select-option value="社保+公积金">社保+公积金</a-select-option>
                                <a-select-option value="工资">工资</a-select-option>
                                <a-select-option value="车辆">车辆</a-select-option>
                                <a-select-option value="福利">福利</a-select-option>
                                <a-select-option value="房租水电">房租水电</a-select-option>
                                <a-select-option value="业务费用">业务费用</a-select-option>
                                <a-select-option value="电脑设备购置">电脑设备购置</a-select-option>
                                <a-select-option value="活动培训费">活动培训费</a-select-option>
                                <a-select-option value="家具车辆打印设备购置">家具车辆打印设备购置</a-select-option>
                                <a-select-option value="其他费用">其他费用</a-select-option>
                                <a-select-option value="物业押金">物业押金</a-select-option>
                                <a-select-option value="物业取费">物业取费</a-select-option>
                                <a-select-option value="佣金">佣金</a-select-option>
                                <a-select-option value="保险">保险</a-select-option>
                                <a-select-option value="材料检测">材料检测</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col> <a-col :span="12">
                        <a-form-item label="付款金额" name="paymentAmount">
                            <a-input v-model:value="form.paymentAmount" :disabled="disabled" style="width: 100%"
                                placeholder="" />
                        </a-form-item>
                    </a-col>

                </a-row>
            </div> -->


            <!-- 公用部分 -->
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="支付对象" name="payObj">
                        <a-input v-model:value="form.payObj" :disabled="disabled" style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="付款日期" name="payTime">
                        <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled"
                            v-model:value="form.payTime" style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>

                <!-- <a-col :span="12">

                    <a-form-item label="收款银行" name="bank">
                        <a-input v-model:value="form.bank" :disabled="disabled" style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col> -->
            </a-row>
            <a-row :gutter="16">
                <!-- <a-col :span="12">
                    <a-form-item label="银行账号" name="bankNumber">
                        <a-input v-model:value="form.bankNumber" :disabled="disabled" style="width: 100%"
                            placeholder="" />
                    </a-form-item>
                </a-col> -->

            </a-row>

            <a-row :gutter="16" v-show="disabled">
                <a-col :span="12">
                    <a-form-item label="申请人" name="createUserName">
                        <a-input v-model:value="form.createUserName" disabled style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="申请部门" name="orgName">
                        <a-input v-model:value="form.orgName" disabled style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16" v-show="disabled">
                <a-col :span="12">
                    <a-form-item label="申请日期" name="createTime">
                        <a-input valueFormat="YYYY-MM-DD hh:mm:ss" v-model:value="form.createTime" disabled
                            style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
            </a-row>
            <system :value="form"></system>
        </a-form>
        <projectSelection ref="projectControl" @onClose="projectControlSelectOk" :value="form.proSelectRecords" />
        <contractpurSelection ref="contractControl" :type="form.type" @onClose="contractControlSelectOk" />
    </div>
</template>
<script setup>
import system from '@/components/Task/system.vue'
import api from '@/api/finance/payment/index'
import { payType, collectionType, paymentType } from '@/utils/constants.js'
import contractpurSelection from '@/components/pm/contractSelection.vue'
import projectSelection from '@/components/pm/projectSelection.vue'

const form = ref({ type: "1" })
const formRef = ref()


const projectControl = ref()
const onProjectSearch = () => {
    projectControl.value.show()
}
const projectControlSelectOk = (selectedRowKeys, selectRecords) => {
    form.value.proId = selectRecords[0].id
    form.value.proName = selectRecords[0].name
    form.value.custom = selectRecords[0].custom
    form.value.proSelectRecords = selectRecords;
}




const contractControl = ref()
const onContractSearch = () => {
    contractControl.value.show()
}
const contractControlSelectOk = (selectedRowKeys, selectRecords) => {
    form.value.contractId = selectRecords[0].id
    form.value.contractName = selectRecords[0].name
    form.value.supplierId = selectRecords[0].supplierId
    getSupplier(selectRecords[0].supplierId)
}



const submit = () => {
    formRef.value.validate().then(() => {
        handleFinish(form.value)
    }).catch((err) => {

    });
}
const handleFinish = (values) => {

    console.log("handleFinish", values);
    if (!form.value.id) {
        api.add(values).then(() => {
            onClose(true);
        })
    } else {
        values.id = form.value.id;
        api.edit(values).then(() => {
            onClose(true);
        })
    }
};
const isEdit = ref(false)
const show = (record) => {
    if (record) {
        form.value = { ...record }
        getSupplier(form.value.supplierId)
        isEdit.value = true;
    } else {
        form.value = { type: "1" }
        isEdit.value = false
    }
}

const props = defineProps({
    value: {
        type: Object,
        default: () => { }
    },
    disabled: {
        type: Boolean,
        default: () => false
    }
})
const getSupplier = (supplierId) => {
    if (supplierId) {
        api.supplierAccount({ supplierId: supplierId }).then(x => {
            if (x) {
                form.value.supplierName = x.supplierName
                form.value.bank = x.bank
                form.value.account = x.account
            }
        })
    }
}
watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal) {
            form.value = { ...newVal }

            if (form.value.supplierId) {
                getSupplier(form.value.supplierId)
            }
            if (!form.value.type) {
                form.value.type = "1"
            }
        }
    },
    { deep: true, immediate: true }
)

const getData = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
            form.value.flowCode = "FLW_PAYMENT"
            resolve(form.value)
        }).catch((err) => {
            reject(err)
        });
    })
}
// 重置
const resetForm = () => {
    formRef.value.resetFields()
}
defineExpose({
    getData,
    resetForm,
    show,
    submit,
})

const emits = defineEmits(['OnClose'])
const onClose = (refresh) => {
    emits('OnClose', refresh)
};

</script>